<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>canvas 填充样式</title>
</head>

<body>
<div id="canvas-warp">
    <canvas id="canvas" style=" border: 1px solid #aaaaaa; display: block; margin:  50px auto;">
    你的浏览器居然不支持Canvas? 
    </canvas>
</div>
<!-- <img src="./icon.png" alt=""> -->


<script>
window.onload = function() {
    var canvas = document.getElementById("canvas");
    canvas.width = 800;
    canvas.height = 600;
    var context = canvas.getContext("2d");

    var img = new Image();
    img.src = "./icon.png";
    img.width = 10;
    img.height = 10;
    img.onload = function() {
        // var pattern = context.createPattern(img, "repeat");
        // var pattern = context.createPattern(img, "repeat-x");
        // var pattern = context.createPattern(img, "repeat-y");
        var pattern = context.createPattern(img, "no-repeat");

        context.fillStyle = pattern;

        context.fillRect(0, 0, 800, 600);
    }
    // 这里使用了Image的onload事件，他的作用是对图片进行预加载处理，即在图片加载完成后才立即触发起其后function的代码体
}
</script>
</body>

</html>